<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        :root {
            --primary-color: #2196F3;
            --text-color: white;
            --panel-bg: rgba(255, 255, 255, 0.1);
            --data-row-color: gray;
        }

        body {
            background: black;
            margin: 0;
            padding: 16px;
            color: var(--text-color);
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
        }

        .container {
            max-width: 600px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
        }

        /* 速度仪表样式 */
        .gauge-container {
            position: relative;
            width: 300px;
            height: 300px;
            margin-bottom: 16px;
        }

        #speedText {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 10;
        }

        #speedValue {
            font-size: 120px;
            /* font-weight: bold; */
        }

        #speedUnit {
            font-size: 17px;
            color: rgba(255, 255, 255, 0.7);
        }

        /* 数据面板样式 */
        .data-panel {
            background: var(--panel-bg);
            border-radius: 8px;
            padding: 16px;
            width: 90%;
            margin-bottom: 16px;
        }

        .data-row {
            display: flex;
            justify-content: space-between;
            margin: 8px 0;
            color: var(--data-row-color);
        }

        /* 状态指示器 */
        .status-indicator {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 8px;
            width: 100%;
        }

        /* 计数指示器 */
        .update-count {
            text-align: center;
            margin-bottom: 8px;
            color: var(--data-row-color);
            width: 100%;
        }

        /* 控制按钮样式 */
        #btnToggle {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 16px;
            width: 100%;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: opacity 0.3s;
        }

        #btnToggle:active {
            opacity: 0.8;
        }

        /* 提示信息样式 */
        .hint {
            margin-top: 16px;
            color: var(--data-row-color);
            font-size: 14px;
            text-align: center;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 速度仪表 -->
        <div class="gauge-container">
            <canvas id="canvas" width="400" height="400"></canvas>
            <div id="speedText">
                <div id="speedValue">0</div>
                <div id="speedUnit">km/h</div>
            </div>
        </div>

        <!-- 数据面板 -->
        <div class="data-panel">
            <div class="data-row">
                <span>纬度：</span>
                <span id="latitude">--</span>
            </div>
            <div class="data-row">
                <span>经度：</span>
                <span id="longitude">--</span>
            </div>
            <div class="data-row">
                <span>海拔：</span>
                <span id="altitude">--</span>
            </div>
            <div class="data-row">
                <span>精度：</span>
                <span id="accuracy">--</span>
            </div>
            <div class="data-row">
                <span>方向：</span>
                <span id="bearing">--</span>
            </div>
            <div class="data-row">
                <span>时间：</span>
                <span id="time">--</span>
            </div>
        </div>

        <!-- 状态指示 -->
        <div class="status-indicator" id="statusText">状态：等待启动</div>

        <!-- 计数显示 -->
        <div class="update-count">
            <span>更新次数：</span>
            <span id="updateCount">0</span>
        </div>

        <!-- 控制按钮 -->
        <button id="btnToggle">启动定位</button>

        <!-- 提示信息 -->
        <div class="hint">
            点击启动按钮开始定位，再次点击可停止定位
        </div>
    </div>

    <script>
        // 更新仪表
        function updateGauge(speed) {
            const progressAngle = -120 + (Math.min(speed, 180) / 180) * 150;
            drawSpeedArc(speed);
            document.getElementById('speedValue').textContent = Math.round(speed);
        }

        // 更新状态显示
        function updateStatus(text, color) {
            const statusElement = document.getElementById('statusText');
            statusElement.textContent = "状态：" + text;
            statusElement.style.color = color;

            // 更新按钮文字
            const btn = document.getElementById('btnToggle');
            btn.textContent = text.includes("启动") ? "启动定位" : "停止定位";
        }

        // 更新计数显示
        function updateUpdateCount(count) {
            document.getElementById('updateCount').textContent = count;
        }

        // 页面加载时初始化
        window.addEventListener('load', function () {
            // 初始计数显示为 0
            updateUpdateCount(0);
        });

        // 修改按钮点击处理
        document.getElementById('btnToggle').addEventListener('click', function () {
            if (typeof AndroidBridge !== 'undefined') {
                AndroidBridge.toggleLocation();
            } else {
                console.error('AndroidBridge interface not found!');
            }
        });

        // 在HTML页面中的JavaScript代码部分添加以下方法
        function syncLocationState(isActive, locationData) {
            if (isActive) {
                // 如果定位处于活动状态，更新页面显示
                updateStatus("定位进行中", "#4CAF50");
                document.getElementById('btnToggle').textContent = "停止定位";
                if (locationData) {
                    updateLocationUI(locationData);
                }
            } else {
                // 如果定位不处于活动状态，更新页面为初始状态
                updateStatus("等待启动", "#9E9E9E");
                document.getElementById('btnToggle').textContent = "启动定位";
                // 可以选择重置其他显示信息
                resetLocationDisplay();
            }
        }

        // 重置显示的方法
        function resetLocationDisplay() {
            document.getElementById('latitude').textContent = '--';
            document.getElementById('longitude').textContent = '--';
            document.getElementById('altitude').textContent = '--';
            document.getElementById('accuracy').textContent = '--';
            document.getElementById('bearing').textContent = '--';
            document.getElementById('time').textContent = '--';
            document.getElementById('speedValue').textContent = '0';
            updateUpdateCount(0);
        }

        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const r = 120; // 半径

        // 设置线宽
        ctx.lineWidth = 60;


        // 绘制黑色外弧
        ctx.beginPath();
        ctx.arc(150, 150, r, Math.PI*8/3.7, Math.PI*5/6, true);
        ctx.strokeStyle = 'gray';
        ctx.stroke();

        // 绘制速度动画弧（内部弧）
        function drawSpeedArc(speed) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 再次绘制黑色外弧
            ctx.beginPath();
            ctx.arc(150, 150, r, Math.PI*8/3.7, Math.PI*5/6, true);
            ctx.strokeStyle = 'gray';
            ctx.stroke();

            // 计算速度对应的角度
            const maxSpeed = 150;
            const startAngle = Math.PI*5/6; // 8点钟方向
            const endAngle = Math.PI*1;    // 3点钟方向
            const angleRange =  endAngle - startAngle;
            const angle = startAngle + (speed / maxSpeed) * angleRange;

            // 绘制速度动画弧
            ctx.beginPath();
            ctx.arc(150, 150, r, startAngle, angle, false);

            // 根据速度设置颜色（从蓝色到红色）
            ctx.strokeStyle = `rgb(255, 255, 0)`;

            ctx.stroke();
            console.log(speed);
            console.log(angleRange);
            console.log(angle);
        }

    </script>
</body>

</html>